<template>
<div>
    <x-header>新闻详情</x-header>
    <Spinner type="android" v-if="Object.keys(infoData).length == 0" class="mySpinner"></Spinner>
    <div v-else class="info-box">
        <div class="info-title-box">
            <h2 class="info-title">{{infoData.title}}</h2>
        <div class="bottom-box">
            <span>{{infoData.visitNum}} 阅读</span>
              <i class="bottom-spot">·</i>
              <span>{{infoData.commentsCount}} 评论</span>
              <p class="bottom-time">{{infoData.createTime}}</p>
        </div>
        </div>
        <div class="infoData">
            <Swiper class="mySwiper">
                <SwiperItem v-for="(obj, indexKey) in JSON.parse(infoData.images)" :key="indexKey">
                  <img :src="`${__ctx}/sys/sysFile/download?fileId=${obj.id}`">
                  </SwiperItem>
              </Swiper>
              <div v-html="infoData.content" class="infoData-box">{{infoData.content}}</div>
        </div>
    </div>
</div>
</template>
<script>
import { Swiper, SwiperItem, Spinner } from "vux";
export default {
  name: "NewsDetail",
  components: {
    Swiper,
    SwiperItem,
    Spinner
  },
  data() {
    return {
      infoData: {},
      id: ""
    };
  },
  mounted() {
    let _query = this.$route.query;
    if (_query && _query.id) {
      this.id = _query.id;
      this.getNewDetailData();
    }
  },
  methods: {
    getNewDetailData() {
      let defer = this.baseService.get(
        this.__ctx + "/oa/oANews/getOANewsDetails?id=" + this.id
      );
      defer.then(data => {
        if (data.isOk) {
          this.infoData = data.data;
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.mySpinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.info-box {
  .info-title-box {
    background-color: #fff;
    margin-bottom: 10px;
    .info-title {
      color: #17233d;
      font-size: 1.7em;
      line-height: 1.5;
      font-weight: normal;
      padding: 20px 10px 10px 10px;
    }
    .bottom-box {
      position: relative;
      height: 4em;
      line-height: 4em;
      padding-left: 15px;
      font-size: 1.1em;
      color: #808695;
      .bottom-spot {
        margin: 0 5px;
      }
      .bottom-time {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
      }
    }
  }
  .infoData {
    background-color: #fff;
    .mySwiper {
      margin-bottom: 15px;
      .vux-swiper-item > img {
        width: 100%;
        height: 100%;
      }
    }
    .infoData-box {
      padding: 0 10px;
    }
  }
}
</style>
